import { Button, Form, Input, Select, } from 'antd';
import { useState } from 'react';

const { Option } = Select;

export default function CombineForms() {
    const [form] = Form.useForm();
    const [eventNameRequired, setEventNameRequired] = useState<boolean>(false);
    const [eventTypeRequired, setEventTypeRequired] = useState<boolean>(false);

    // 表单提交
    const onFinish = (values: any) => {
        console.log(values);
    };

    // 表单重置
    const onReset = () => {
        form.resetFields();
    };

    // 要么都写要么都不写核心函数
    const changeSelect = (value: any, word: string, required: any) => {
        console.log("value, word, required", value, word, required);
        const formData = form.getFieldsValue(); // 获取所有字段的值
        console.log('Form Data:', formData, formData[required]);
        let select = formData[word].select;
        let input = formData[word].value;
        console.log("select,input", select, input);
        // 要么都有值要么都为空
        const boolean = (select && (input === "" || input === undefined)) || (select === undefined && input);
        console.log("boolean", boolean);
        if (boolean) {
            console.log("修改为true");
            changeAllRequired(required, true)
        } else {
            console.log("修改为false");
            changeAllRequired(required, false)
        }
        form.validateFields().then(() => { }, () => { },);
    }

    // input和select只要有一个有值就修改对应的为true，同时为空设置为false
    const changeAllRequired = (required: string, boolean: boolean) => {
        switch (required) {
            case "eventNameRequired": setEventNameRequired(boolean); break;
            case "eventTypeRequired": setEventTypeRequired(boolean); break;
            default: break;
        }
    }

    return (
        <div>
            <button className='returnButton'><a href="/">点击返回主菜单</a></button>
            <h1>组合表单项的使用</h1>
            <div className='content_text'>
                <p>要么都填写要么都不填写。</p>
                <p>
                    这个演示demo核心函数有两个，一个是监控数据输入修改的changeSelect，
                    另外一个是控制是否必要输入进行提示的changeAllRequired函数。
                    select不仅可以下拉选择还支持清空选项，下拉选择后会选择到对应的值，
                    点击清除时值为undefined ，而input输入框则是实时内容。
                </p>
                    <pre>
const boolean = (select && (input === "" || input === undefined)) || (select === undefined && input);
                </pre>
                <p>
                    上面这个代码是判断select和input是否只有一个为空，如果只有一个为空另外一个不为空，
                    则将该组合选项的required设置为true，同时为空或者都有内容为false。这里的select只判定
                    undefined而input会判定undefined和空字符串的原因是，select不填和清除的情况下都是undefined，
                    而input没填的时候是undefined，而删除清空的时候是“”，所以判断两种情况。确定了是否必填为false
                    还是true后就调用函数修改对应的控制变量。
                </p>
            </div>
            <Form
                form={form}
                name="advanced_search"
                onFinish={onFinish}
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 16 }}
            >
                <Form.Item label="事件名称">
                    <Input.Group compact>
                        <Form.Item
                            name={['eventName', 'select']}
                            noStyle
                            rules={[{ required: eventNameRequired, message: '填充内容后操作符不能为空!' }]}
                        >
                            <Select allowClear placeholder="请选择" onChange={(value) => changeSelect(value, "eventName", "eventNameRequired")}>
                                <Option value="is">等于</Option>
                                <Option value="not_is">不等于</Option>
                                <Option value="like">包含</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item
                            name={['eventName', 'value']}
                            noStyle
                            rules={[{ required: eventNameRequired, message: '选择操作符后内容不能为空' }]}
                        >
                            <Input style={{ width: '70%' }} placeholder="请输入内容" onChange={(value) => changeSelect(value, "eventName", "eventNameRequired")} />
                        </Form.Item>
                    </Input.Group>
                </Form.Item>
                <Form.Item label="事件类型">
                    <Input.Group compact>
                        <Form.Item
                            name={['eventType', 'select']}
                            noStyle
                            rules={[{ required: eventTypeRequired, message: '填充内容后操作符不能为空!' }]}
                        >
                            <Select allowClear placeholder="请选择" onChange={(value) => changeSelect(value, "eventType", "eventTypeRequired")}>
                                <Option value="is">等于</Option>
                                <Option value="not_is">不等于</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item
                            name={['eventType', 'value']}
                            noStyle
                            rules={[{ required: eventTypeRequired, message: '选择操作符后内容不能为空' }]}
                        >
                            <Input style={{ width: '70%' }} placeholder="请输入内容" onChange={(value) => changeSelect(value, "eventType", "eventTypeRequired")} />
                        </Form.Item>
                    </Input.Group>
                </Form.Item>
                <Form.Item label="命中情报" name="intelligence">
                    <Select placeholder="请选择">
                        <Option value="is">命中</Option>
                        <Option value="not_is">未命中</Option>
                    </Select>
                </Form.Item>
                <Form.Item>
                    <div className='antd_combine_form'>
                        <Button type="primary" htmlType="submit">
                            确定
                        </Button>
                        <Button type="primary" htmlType="button" onClick={onReset}>
                            重置
                        </Button>
                    </div>
                </Form.Item>
            </Form>
        </div>
    )
}
